<template>
  <div class="chart-main-card">
    <div class="title">主机运行时长</div>
    <div class="chart-main-content">
      <div class="chart-item">
        <div class="chart" ref="chart1" style="width: 100%;height: 100%;"></div>
      </div>
      <div class="chart-item">
        <div class="chart" ref="chart2" style="width: 100%;height: 100%;"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  components: {},
  data() {
    return {};
  },
  methods: {
    initChart(list, chart) {
      const data = [
        { value: 0, itemStyle: { color: "#5470C6" } },
        { value: 0, itemStyle: { color: "#91CC75" } },
        { value: 0, itemStyle: { color: "#EE6666" } },
        { value: 0, itemStyle: { color: "#FAC858" } },
      ];
      for (let index = 0; index < data.length; ++index) {
        data[index].value = list[index];
      }
      this.myChart = echarts.init(chart);
      const options = {
        polar: {
          radius: [20, "80%"],
        },
        angleAxis: {
          max: 24,
          startAngle: 90,
          axisLine: { lineStyle: { color: "#fff" } },
          splitLine: {
            lineStyle: { color: "#aaa" },
            show: true,
          },
          interval: 6,
        },
        radiusAxis: {
          type: "category",
          data: ["1#", "2#", "3#", "4#"],
          axisLine: { lineStyle: { color: "#fff" } },
          axisLabel: {
            show: false,
          },
        },
        tooltip: {},
        series: [
          {
            type: "bar",
            data,
            coordinateSystem: "polar",
            label: {
              show: true,
              position: "middle",
              formatter: "{b}: {c}",
              color: "#fff",
            },
          },
        ],
      };

      this.myChart.setOption(options);
    },
  },
  mounted() {
    const list1 = [13, 6, 8, 10];
    this.initChart(list1, this.$refs.chart1);
    const list2 = [15, 11, 10, 20];
    this.initChart(list2, this.$refs.chart2);
  },
};
</script>

<style scoped lang="scss">
.chart-main-content {
  display: flex;
  height: 100%;
  .chart-item {
    width: 50%;
    height: 100%;
  }
}
</style>
